import { Link } from "react-router-dom";

export default function Home() {
  return (
    <div className="max-w-3xl mx-auto px-4 py-8">
      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
        <h1 className="text-3xl font-bold text-center text-blue-600 mb-2">Welcome to Our Website</h1>
        <p className="text-center text-gray-600">Discover more about our services and offerings</p>
      </div>
      
      <div className="bg-blue-50 rounded-lg shadow p-8 mb-8">
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Home Page</h2>
        <p className="text-gray-700 mb-6">Welcome to the home page! This is the main landing area where we showcase our key features and information.</p>
        
        <div className="flex justify-center">
          <Link 
            to="/about" 
            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300"
          >
            Go to About
          </Link>
        </div>
      </div>
      
      <footer className="text-center text-gray-500 text-sm">
        <p>&copy; 2025 Company Name. All rights reserved.</p>
      </footer>
    </div>
  );
}